<template>
	<layout>
		<view class="flex-v">
			<u-navbar title="会员权益" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
			<view class="pad-l-base pad-t-base pad-r-base" :class="{'pad-b-base': vipCards.length === 1}">
				<view class="pos-real">
					<u-swiper :current="cardIdx" :list="vipCards" @change="cardChange" name="cardImageUrl" :height="372"
						mode="none" :autoplay="false" :border-radius="24"></u-swiper>
					<view v-if="vipCards.length" class="pos-abs-fill">
						<view class="fill pad-l-sm pad-t-sm pad-b-sm text-white flex-v">
							<view class="h-box">
								<image :src="userInfo.avatar || '../static/img/user.png'" class="user-head"></image>
								<view class="mg-l-xs flex-extend pad-r-xs" style="word-break: break-all;">
									<view style="font-size: 38rpx;">{{userInfo.nickname || '未设置'}}</view>
									<view class="h-box">
										<image v-if="userInfo.gender === 1" class="img-gender"
											src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_wode_nan@2x.png"></image>
										<image v-else class="img-gender" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_wode_nv@2x.png"></image>
										<text>{{userInfo.mobile}}(ID:{{userInfo.id}})</text>
									</view>
								</view>
							</view>
							<view class="flex-extend"></view>
							<view class="h-box pad-r-sm">
								<view class="flex-extend">
									<text
										class="mg-r-sm">有效期截止：{{$formatTime(vipCards[cardIdx].expirationTime).substring(0, 10)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @click="cardIdx = cardIdx === 0 ? 1 : 0" v-if="vipCards.length > 1"
					class="h-box justify-center pad-b-sm">
					<view class="pos-real vip-indicator">
						<view class="pos-abs-lt pos-abs-lb vip-indicator-thumb"
							:class="{'vip-indicator-thumb-right': cardIdx === 1}"></view>
					</view>
				</view>
			</view>
			<view class="gap"></view>
			<view class="vip-symbol pad-base uni-flex align-center">
				<image class="vip-symbol-icon" src="static/img/ic_huiyuan_quanyi@2x.png"></image>
				<text class="vip-symbol-title uni-flex-extend">会员权益</text>
				<text class="vip-symbol-subtitle">彰显会员特权，体现会员个性</text>
			</view>
			<view class="pad-l-base pad-r-base pad-b-base">
				<view class="h-box mg-b-sm" v-for="(right, rightIdx) in vipCards[cardIdx].rights" :key="right.key"
					style="padding-left: 12rpx;">
					<view class="pos-real">
						<image mode="aspectFit" src="static/img/ic_zhuangshi_tiao@2x.png"
							style="width: 56rpx;height: 56rpx;vertical-align: bottom;"></image>
						<view class="pos-abs-fill h-box justify-center">{{rightIdx + 1}}</view>
					</view>
					<view class="mg-l-sm text-dark" style="line-height: 42rpx;">{{right.content}}</view>
				</view>
				<view v-if="vipCards.length && vipCards[cardIdx].serviceCount" class="service-count uni-flex">
					<text>联盟门店服务</text>
					<text class="count">{{vipCards[cardIdx].serviceCount || 0}}</text>家
					<view class="l-mg">
						<u-button @click="navToService" shape="circle" size="mini">查看</u-button>
					</view>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				order: null,
				rights: [],
				btnText: '购买',
				needLoadRemainTimes: false, //是否加载会员剩余的服务次数

				cardIdx: 0
			}
		},
		computed: {
			...mapState(["userInfo"]),
			freeService() {
				let isNormalStoreVip = this.userInfo && this.userInfo.vipInfo && this.userInfo.vipInfo.storeVipCardInfo && this.userInfo.vipInfo.storeVipCardInfo.expirationTime >= Date.now()
				let isSuperVip = isNormalStoreVip && this.userInfo.vipInfo.storeVipCardInfo.settlementWay === 'time'
				let isMerchantVip = this.userInfo && this.userInfo.vipInfo && this.userInfo.vipInfo.merchantVipCardInfo && this.userInfo.vipInfo.merchantVipCardInfo.expirationTime >= Date.now()
				return isSuperVip || isMerchantVip
			},
			vipCards() {
				let t = []
				if (this.userInfo.vipInfo) {
					if (this.userInfo.vipInfo.storeVipCardInfo) {
						t.push(this.userInfo.vipInfo.storeVipCardInfo)
					}
					if (this.userInfo.vipInfo.merchantVipCardInfo) {
						t.push(this.userInfo.vipInfo.merchantVipCardInfo)
					}
				}
				t.forEach(item => {
					item.rights = []
				})
				return t
			}
		},
		onReady() {
			this.loadData()
		},
		onReachBottom() {
			// this.$refs.serviceList.loadMore();
		},
		async onPullDownRefresh() {
			await this.loadData()
			uni.stopPullDownRefresh()
		},
		methods: {
			navToVipCards() {
				uni.navigateTo({
					url: './vip-cards'
				})
			},
			cardChange(idx) {
				this.cardIdx = idx
			},
			navToService() {
				let vipCard = this.vipCards[this.cardIdx]
				if (vipCard.type == 'store') {
					uni.navigateTo({
						url: `../pagesService/map`
					})
				} else {
					if (vipCard.serviceCategoryIds && vipCard.serviceCategoryIds.length) {
						uni.navigateTo({
							url: `../pagesService/map?categoryId=${vipCard.serviceCategoryIds[0]}`
						})
					} else {
						uni.navigateTo({
							url: `../pagesService/map`
						})
					}
				}
			},
			async loadData() {
				try {
					this.order = null;
					uni.showLoading({
						mask: true
					})
					let ids = this.vipCards.map(item => {
						return item.cardId
					})
					let list = await this.$dbHelper.getList("t3ds-vip-card", {
						showLoading: false,
						where: `_id in ${JSON.stringify(ids)}`,
						showLoading: false
					})
					let cardDic = {}
					list.forEach(item => {
						cardDic[item._id] = item
					})
					this.vipCards.forEach(item => {
						let cardDetail = cardDic[item.cardId]
						item.rights = cardDetail.rights.split('\n').map((item, idx) => {
							return {
								key: `item_${idx}`,
								content: item
							}
						})
					})
					for (var i = 0; i < list.length; i++) {
						let item = this.vipCards[i]
						let cardDetail = cardDic[item.cardId]
						item.serviceCategoryIds = cardDetail.serviceCategoryIds
						item.rights = cardDetail.rights.split('\n').map((item, idx) => {
							return {
								key: `item_${idx}`,
								content: item
							}
						})
						if (cardDetail.type == 'store' && cardDetail.settlementWay == 'time' && cardDetail.time == 'oneYear') {
							item.serviceCount = await this.$dbHelper.getCount("t3ds-store", {
								where: `enabled == true && joinFreePlan == true && region.city.value == '${uni.getStorageSync('currentRegion').city.value}'`,
								showLoading: false
							})
						} else if (cardDetail.type == 'merchant') {
							item.serviceCount = await this.$dbHelper.getCount("t3ds-store", {
								where: `enabled == true && joinFreePlan == true && categoryId in ${JSON.stringify(cardDetail.serviceCategoryIds)} && region.city.value == '${uni.getStorageSync('currentRegion').city.value}'`
							})
						}
					}
					this.$forceUpdate()
					uni.hideLoading()
				} catch (e) {
					console.error(e)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.img-gender {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.vip-symbol {
		&-icon {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		&-title {
			color: #966200;
			font-size: 36rpx;
			font-weight: bold;
		}

		&-subtitle {
			color: #D89D4D;
		}
	}

	.rights {
		&-title {
			position: relative;
			margin-right: 30rpx;
			width: 60rpx;
			height: 60rpx;

			image {
				width: 100%;
				height: 100%;
			}

			text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #966200;
			}
		}

		&-text {
			color: #666666;
		}
	}

	.rights:not(:last-child) {
		margin-bottom: 20rpx;
	}

	.vip-card {
		position: relative;

		&-content {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 20rpx;
			z-index: 99;
		}

		color: #fff;
		border-radius: 40rpx;
		margin: 0 auto;
	}

	.btn-check {
		border: 1px solid #CCCCCC;
		border-radius: 20rpx;
		padding: 0 20rpx;
		font-size: 20rpx;
		margin-left: 20rpx;
	}

	.name {
		font-size: 20px;
	}

	.service-count {
		padding-left: 98rpx;
		color: #666666;

		.count {
			color: #FF7E00;
		}
	}

	.vip-indicator {
		margin-top: 10rpx;
		height: 8rpx;
		width: 84rpx;
		background-color: #DEDEDE;
		border-radius: 4rpx;

		&-thumb {
			width: 30rpx;
			background-color: #D61719;
			border-radius: 4rpx;
			left: 0;
		}

		&-thumb-right {
			left: 54rpx;
		}
	}
</style>
